<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<link rel="shortcut icon" href="images/favicon.ico" />
<title></title>
<link href="css/base.css" rel="stylesheet"/>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--头部导航栏-->
<header class="headbox">
	<div class="w1200">
        <div class="logo fn-left">
            <a href="#">
                <img src="images/logo.png" alt="" class="img-responsive"/>
            </a>
        </div>
        <nav class="fn-left">
            <ul>
                <li>
                    <a href="index.html">营业时间</a>
                </li>
                <li>
                    <a href="page2.html" class="active">天御养成经</a>
                </li>
                <li>
                    <a href="page3.html">品牌故事</a>
                </li>
                <li>
                    <a href="page4.html">媒体报道</a>
                </li>
                <li>
                    <a href="page5.html">明星产品</a>
                </li>
                <li>
                    <a href="page6.html">关于我们</a>
                </li>
            </ul>
        </nav>
        <div class="fn-clear"></div>
    </div>
</header>
<!--//头部导航栏-->

<div class="wrapper">
	<div class="ysjheading">
    	<img src="images/banner2.jpg" alt="" class="img-responsive"/>
    </div>
    
	<!--养生经-->
    <div class="ysjbody">
    	<div class="flow">
        	<img src="images/p21.jpg" alt="" class="img-responsive"/>
        </div>
        <div class="flow">
        	<img src="images/p22.jpg" alt="" class="img-responsive"/>
        </div>
        <div class="flow">
        	<img src="images/p23.jpg" alt="" class="img-responsive"/>
        </div>
        <div class="flow">
        	<img src="images/p24.jpg" alt="" class="img-responsive"/>
        </div>
        <div class="flow">
        	<img src="images/p25.jpg" alt="" class="img-responsive"/>
        </div>
        <div class="flow">
        	<img src="images/p26.jpg" alt="" class="img-responsive"/>
        </div>
        <div class="flow">
        	<img src="images/p27.jpg" alt="" class="img-responsive"/>
        </div>
        <div class="flow">
        	<img src="images/p28.jpg" alt="" class="img-responsive"/>
        </div>
        <div class="flow">
        	<img src="images/p29.jpg" alt="" class="img-responsive"/>
        </div>
        <div class="flow">
        	<img src="images/p210.jpg" alt="" class="img-responsive"/>
        </div>
        <div class="flow">
        	<img src="images/p211.jpg" alt="" class="img-responsive"/>
        </div>
        <div class="flow">
        	<img src="images/p212.jpg" alt="" class="img-responsive"/>
        </div>
    </div>
    <!--//养生经-->
</div>

<!--底部-->
<footer class="footer"></footer>

<div class="rightnavbox">
	<ul>
         <li class="on">一月</li>
         <li>二月</li>
         <li>三月</li>
         <li>四月</li>
         <li>五月</li>
         <li>六月</li>
         <li>七月</li>
         <li>八月</li>
         <li>九月</li>
         <li>十月</li>
         <li>十一月</li>
         <li>十二月</li>
     </ul>
</div>

<!--//底部-->
<script src="js/jquery.min.js"></script>
<script>	
//左侧悬浮导航
$(window).scroll(function(){
var scrollH=$(window).scrollTop();
$(".ysjbody .flow").each(function(index){
var ooH=$(this).offset().top;
if (scrollH>=ooH) {$('.rightnavbox li').eq(index).addClass('on').siblings().removeClass('on');}
});
});
$('.rightnavbox li').click(function(){
var index=$(this).index();
var oH=$(".ysjbody .flow").eq(index).offset().top;
$(this).addClass('on').siblings().removeClass('on');
$("body,html").animate({scrollTop:oH},600);
}); 
</script>
</body>
</html>